<template>
	<div class="mylist-wrap">
		<ul class="tabNav">
			<li>拼团商品</li>
			<li class="cur">我的拼团</li>
		</ul>
		<ul>
			<li class="itemBox">
				<div class="mylistTop">
					<div class="imgBox">
						<img src="" alt="">
					</div>
					<div class="detailBox">
						<p class="lable"><span class="s1">新人团</span></p>
						<h4 class="l_name">依恋家纺车依恋家纺车载三USB充电器</h4>
						<p class="l_info">
							<span class="s1">2人团</span>
							<span class="s2">￥150</span>
							<span class="s3">单买价: <em>¥200</em></span>
						</p>
					</div>
				</div>
				<div class="mylistInfo">
					<p class="tuan_status">待成团 还差<span>3</span>人</p>
					<a class="link_btn" href="javascript:;">订单详情</a>
					<a class="link_btn" href="javascript:;">拼团详情</a>
				</div>
			</li>

			<li>
				<div class="mylistTop">
					<div class="imgBox">
						<img src="" alt="">
					</div>
					<div class="detailBox">
						<p class="lable"><span class="s1">新人团</span></p>
						<h4 class="l_name">依恋家纺车依恋家纺车载三USB充电器</h4>
						<p class="l_info">
							<span class="s1">2人团</span>
							<span class="s2">￥150</span>
							<span class="s3">单买价: <em>¥200</em></span>
						</p>
					</div>
				</div>
				<div class="mylistInfo">
					<p class="tuan_status">待成团 还差<span>3</span>人</p>
					<a class="link_btn" href="javascript:;">订单详情</a>
					<a class="link_btn" href="javascript:;">拼团详情</a>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	//import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
			};
		},
		components: {},
		created (){
		},
		mounted (){
		},
		methods: {
			
		}
	}
</script>
<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
		background-color: #fff;
	}
	.mylist-wrap {
		.tabNav{
			display: flex;
			display: -webkit-box;//低版本安卓
			display: -webkit-flex; 
			li{
				-webkit-box-flex: 1;
				-webkit-flex: 1; 
				flex:1;
				height: 4rem;
				line-height: 4rem;
				text-align: center;
				font-size: 1.5rem;
				&.cur{
					color:#ff6600;
					position: relative;
					&:after{
						content:'';
						position: absolute;
						bottom:0;
						width: 6rem;
						height: 2px;
						left: 50%;
						margin-left:-3rem; ;
						background-color: #ff6600;
					}
				}
			}
		}
		.itemBox{
			border-bottom:.9rem solid #F6F7F7;
		}
		.mylistTop{
			display: flex;
			display: -webkit-box;//低版本安卓
			display: -webkit-flex; 
			margin: 0 1.5rem;
			padding:1.5rem 0 1rem 0;
			border-bottom: 1px solid #e7e7e7;
			.imgBox{
				margin-right: 1rem;
				width: 13.5rem;
				height: 9rem;
				background-color: #ccc;

			}
			.detailBox{
				-webkit-box-flex: 1;
				-webkit-flex: 1; 
				flex:1;
				.lable {
					margin-bottom: 	1rem;
					span{
						font-size:1.1rem;
						color:#ff6600;
						letter-spacing:0;
						text-align:justify;
						background:#ffefe5;
						border-radius:2px;
						height:1.8rem;
						line-height:1.8rem;
						padding:.2rem .4rem;
					}
					
				}
				.l_name{
					font-size: 1.5rem;
					line-height: 1.6rem;
					margin-bottom: 1.3rem;
				}
				.l_info{
					.s1{
						font-size:1.3rem;
						color:#999;
					}
					.s2{
						font-size:1.3rem;
					}
					.s3{
						font-size:1.1rem;
						color:#999;
						em{
							text-decoration:line-through;
						}
					}
				}
			}
		}
		.mylistInfo{
			overflow: hidden;
			padding:1rem 1.5rem;
			.tuan_status{
				float: left;
				font-size: 1.5rem;
				height:2.7rem;
				line-height:2.7rem;
				width: 11rem;
				margin-right: 6.8rem;
				span{
					color: #ff6600;
				}
			}
			.link_btn{
				float: left;
				font-size:1.3rem;
				color:#243742;
				border:1px solid #8e969b;
				border-radius:1.9rem;
				width:7.4rem;
				height:2.7rem;
				line-height:2.7rem;
				text-align: center;
				margin-right: 1rem;
				&:last-child{
					margin-right: 0;
				}
				-webkit-tap-highlight-color:rgba(255,239,229,.5);
			}
		}
	}
</style>
